<template>
    <div>
        <div class="tit">商品管理>商品分类>添加分类</div>
        <div class="content">

            <div class="spa">基础信息</div>
            <div class="form">
                <form>
                    <div class="level">
                        分类层级
                        <el-radio-group v-model="form.level">
                            <el-radio :label="1" size="large">一级分类</el-radio>
                            <el-radio :label="2" size="large">二级分类</el-radio>
                            <el-radio :label="3" size="large">三级分类</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="type">
                        <div class="item" v-if="form.level > 1">
                            一级分类选择
                            <el-select v-model="first" class="m-2" placeholder="请选择" @change="firstChange">
                                <el-option v-for="item in cateOption" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>
                        <div class="item" v-if="Number(form.level) > 2">
                            二级分类选择
                            <el-select v-model="second" class="m-2" placeholder="请选择" no-data-text="无子类数据，请选择其他主类">
                                <el-option v-for="item in cateOption2" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>

                    </div>

                    <div class="name">
                        类别名称
                        <el-input class="wid-180" type="text" v-model="form.name" />
                    </div>


                    <el-button color="#ed742f" class="font-white" @click="addCategory">保存</el-button>

                </form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import productClassifyService from "@/service/productClassifyService";
import { ElMessage } from "element-plus";
const { id } = useRoute().query //新增为undefine
const router = useRouter()
const form = reactive({
    createTime: "",
    iconUrl: "",
    id: 0,
    level: 1,
    name: "",
    parentId: 0,
    sort: null,
    updateTime: "",
    visible: 1
})
const cateOption = ref([
    {
        value: "1",
        label: "请等待加载",
        children: []
    }
])
const cateOption2 = ref([
    {
        value: "0",
        label: "请先选择一级分类",
        children: []
    }
])
const first = ref()
const second = ref()

onBeforeMount(() => {
    //加载分类数据
    productClassifyService.cascade().then((res: any) => {
        cateOption.value = res.data.data
    })
    //判断是否为编辑数据
    if (id != undefined) {
        productClassifyService.getById(id).then((res: any) => {
            form.id = res.data.data.id
            form.name = res.data.data.name
            form.parentId = res.data.data.parentId
            form.level = res.data.data.level
            form.visible = res.data.data.visible
            form.iconUrl = res.data.data.iconUrl
            if (form.level > 2) {
                second.value = form.parentId
                let firstList;
                cateOption.value.forEach((item)=>{
                    item.children.forEach((item2)=>{
                        if(item2.value==second.value){
                            firstList = item
                        }
                    })
                })
                first.value = firstList.value
                firstChange()
            }
            if (form.level > 1) {
                first
            }

        })

    }

})

//第一类改变时
const firstChange = () => {
    cateOption.value.forEach(item => {
        if (item.value == first.value) {
            cateOption2.value = item.children
        }
    });
}

const addCategory = () => {
    if(form.level==3){
            form.parentId = second.value
        }else if(form.level==2){
            form.parentId = first.value
        }
    if (id === undefined) {
        
        productClassifyService.addNew(form).then((res: any) => {
            router.push({ path: "/Classify" })
            ElMessage({
                message: '新增成功',
                type: 'success',
            })
        })
    } else {
        //修改时间
        // form.updateTime
        // form.sort=0
        productClassifyService.update(form).then((res: any) => {
            router.push({ path: "/Classify" })
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
        })
    }
}

</script>

<style scoped lang="less">
.tit {
    width: 100%;
    height: 50px;
    background-color: white;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 20px;
}

.content {
    margin-top: 20px;
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;

    .spa {
        margin: 15px;
        font-weight: 600;
        font-size: 14px;
        padding: 3px 10px;
        border-left: 5px solid #ed742f;
    }

    .form {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 3%;
    }
}
</style>